<template>
  <div v-if="errorLogs.length > 0">
    <sec-badge
      :is-dot="true"
      style="line-height: 25px; margin-top: -5px"
      @click.native="dialogTableVisible = true"
    >
      <sec-button style="padding: 8px 10px" size="small" type="danger">
        <svg-icon icon-class="bug" />
      </sec-button>
    </sec-badge>

    <sec-dialog
      :visible.sync="dialogTableVisible"
      width="80%"
      append-to-body
      :close-on-click-modal="false"
    >
      <div slot="title">
        <span style="padding-right: 10px">Error Log</span>
        <sec-button
          size="mini"
          type="primary"
          icon="el-icon-delete"
          @click="clearAll"
        >
          Clear All
        </sec-button>
      </div>
      <sec-table :data="errorLogs" border>
        <sec-table-column label="Message">
          <template slot-scope="{ row }">
            <div>
              <span class="message-title">Msg:</span>
              <sec-tag type="danger">{{ row.err.message }}</sec-tag>
            </div>
            <br />
            <div>
              <span class="message-title" style="padding-right: 10px">
                Info:
              </span>
              <sec-tag type="warning">
                {{ row.vm.$vnode.tag }} error in {{ row.info }}
              </sec-tag>
            </div>
            <br />
            <div>
              <span class="message-title" style="padding-right: 16px">
                Url:
              </span>
              <sec-tag type="success">{{ row.url }}</sec-tag>
            </div>
          </template>
        </sec-table-column>
        <sec-table-column label="Stack">
          <template slot-scope="scope">{{ scope.row.err.stack }}</template>
        </sec-table-column>
      </sec-table>
    </sec-dialog>
  </div>
</template>

<script>
export default {
  name: 'ErrorLog',
  data() {
    return {
      dialogTableVisible: false
    }
  },
  computed: {
    errorLogs() {
      return this.$store.getters.errorLogs
    }
  },
  methods: {
    clearAll() {
      this.dialogTableVisible = false
      this.$store.dispatch('errorLog/clearErrorLog')
    }
  }
}
</script>

<style scoped>
.message-title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding-right: 8px;
}
</style>
